<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=tyjXNPZrFk5cyOIwnDErDqUKlyEOIZ1M"></script>
	<script type="text/javascript" src="${ctx}/js/jquery-1.8.3.js" ></script>
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	map.centerAndZoom(new BMap.Point(108.37, 22.82), 13);//南宁市
	map.enableScrollWheelZoom(true);//允许鼠标滚动缩放
	var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
	var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
	var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
	/*缩放控件type有四种类型:
	BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/
	map.addControl(top_left_control);        
	map.addControl(top_left_navigation);     
	map.addControl(top_right_navigation);
	
	
	// 编写自定义函数,创建标注
	function addMarker(point,label){
		var marker = new BMap.Marker(point);
		map.addOverlay(marker);
		marker.setLabel(label);
	}
	// 随机向地图添加几个标注
	var points = [{"w":108.38,"e":22.87},{"w":108.28,"e":22.78},{"w":108.33,"e":22.67},{"w":108.36,"e":22.77},{"w":108.33,"e":22.61},{"w":108.33,"e":22.62},{"w":108.33,"e":22.63},{"w":108.33,"e":22.632},{"w":108.33,"e":22.631}];
	$.each(points,function(i,point){
		console.log(point);
		var point = new BMap.Point(point.w, point.e);
		var label = new BMap.Label("我是id="+i,{offset:new BMap.Size(20,-10)});
		addMarker(point,label);
	});
	
</script>